<template>
    <div>
        <div class="header">
            <h1>支付失败</h1>
        </div>
        <div class="main">
            <img src="../image/pay_success.jpg" alt="pay_success.jpg">
            <div class="order">
                <a>重新支付</a>
                <a class="on">查看订单详情</a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
         name: 'pay_successPage'
    }
</script>

<style scoped lang="less">
    .header {
  height: 80px;
  background: #6a7531;
  h1 {
    text-align: center;
    height: 80px;
    line-height: 80px;
    color: #fff;
    font-size: 36px;
    position: relative;
  }
  h1:before {
    content: "";
    display: block;
    background: url(../image/pay_success_back.png) no-repeat;
    background-size: 27px 45px;
    width: 27px;
    height: 45px;
    position: absolute;
    top: 18px;
    left: 16px;
  }
  h1:after {
    content: "";
    display: block;
    background: url(../image/pay_success_more.png) no-repeat;
    background-size: 10px 43px;
    width: 10px;
    height: 43px;
    position: absolute;
    top: 18px;
    right: 16px;
  }
}
.main{
    img{
        width: 750px;
    }
    .order{
        width: 520px;
        margin:50px auto;
        font-size: 24px;
        a{
            padding: 13px 43px;
            display: block;
            border: 1px solid #dfdfdf;
            float: left;
            margin-right: 50px;
            color: #858585;
        }
        .on{
            color: #fb0303;
        }
    }
}
</style>